<template>
  <!-- 资产报失 -->
  <div class="repairs-form">

    <!-- 轮播图组件 -->
    <Carousel :assetInfoList="assetInfoList" />

    <!-- 数据 start -->
    <div class="repairs-box">
      <p class="b-title">报失数据</p>
      <van-form>
        <!-- <van-field
          v-model="department"
          label="所属部门:"
          disabled
          placeholder="读取资产所在部门"
        /> -->
        <van-field
          v-model="lo_user_name"
          label="报失人员:"
          disabled
          placeholder="读取当前员工"
        />
        <van-field
          v-model="create_time"
          label="报失时间:"
          disabled
          placeholder="默认当前时间"
        />
        <div class="pt-10"></div>
        <van-field
          v-model="form.lo_reason"
          type="textarea"
          placeholder="请输入报失备注"
          rows="5"
          autosize
          required
          label="报失备注"
          :disabled="isdisabled"
        />
        <div style="padding: 16px 16px 40px;background-color: #f8f9fd;" v-if="!isdisabled">
          <van-button block type="info" native-type="submit" @click="handleCreateLoss">
            提交报失
          </van-button>
        </div>
      </van-form>
      <div style="height: 60px; background-color: #f8f9fd;"></div>
    </div>
    <!-- 数据 end -->

  </div>
</template>

<script>
import Carousel from '@/components/Carousel';
import { EDIT_TYPES, COMMON_TYPES } from '@/constant';

export default {
  name: 'repairs-form',
  components: {
    Carousel
  },
  props: ['$edit', '$type'],
  data () {
    return {
      COMMON_TYPES,
      EDIT_TYPES,
      department: this.$store.getters.departmentList[0].department_name, // 默认部门
      lo_user_name: this.$store.getters.name, // 默认人员
      create_time: this.$dayjs().format('YYYY-MM-DD'), // 默认时间
      form: {
        re_id: '', // 记录ID
        lo_a_id: '', // 资产ID
        lo_reason: '' // 报失原因
      },
      assetInfoList: {}, // 资产信息
      isdisabled: false // 是否可编辑
    };
  },
  methods: {
    // 获取资产信息详情,回显轮播图组件
    getAssetInfo () {
      let params = {
        id: this.$route.query.f_id
      };
      this.$api.getAssetInfo(params).then(res => {
        if (res.code === 0) {
          this.assetInfoList = res.result;
        }
      });
    },
    // 创建报失
    handleCreateLoss () {
      if (!this.form.lo_reason) {
        this.$toast.fail('请输入报失备注');
        return;
      }
      let params = {
        lo_a_id: this.$route.query.f_id,
        re_id: this.$route.query.id,
        lo_reason: this.form.lo_reason
      };
      this.$api.postLossAddLoss(params).then(res => {
        if (res.code === 0) {
          this.$toast.success('提交报失成功');
          if (this.$type === COMMON_TYPES.MY && this.$route.query.c_from === '首页') {
            this.$router.replace({
              name: 'home',
              query: {
                title: '首页',
                type: COMMON_TYPES.MY
              }
            });
          } else if (this.$type === COMMON_TYPES.DEPARTMENT) {
            this.$router.replace({
              name: 'my-collecting',
              query: {
                title: '部门领用资产',
                type: COMMON_TYPES.DEPARTMENT,
                dept_id: this.$route.query.dept_id
              }
            });
          } else if (this.$type === COMMON_TYPES.M) {
            this.$router.replace({
              name: 'my-collecting',
              query: {
                title: '我领用的资产',
                type: COMMON_TYPES.MY
              }
            });
          }
        }
      });
    },
    // 获取我的资产报失详情
    handleGetLossEdit () {
      let params = {
        id: this.$route.query.id
      };
      this.$api.getLossMyInfo(params).then(res => {
        if (res.code === 0) {
          const { result } = res;
          this.create_time = result.create_time;
          this.lo_user_name = result.lo_user_name;
          this.form.lo_reason = result.lo_reason;
        }
      });
    }
  },
  created () {
    this.getAssetInfo(); // 获取资产信息详情, 回显轮播图组件;
    if (this.$edit === EDIT_TYPES.DETAIL) {
      this.handleGetLossEdit(); // 获取我的资产报失详情
      this.isdisabled = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.repairs-form {
  // 报失数据
  .repairs-box {
    .b-title {
      color:#1B1B1C;
      font-size: 16px;
      padding: 12px 20px 12px 15px;
      background-color: #f8f9fd;
    }
    ::v-deep.van-field__label {
      width: 78px;
    }
    .pt-10 {
      height: 10px;
      background-color: #f8f9fd;
    }
    .tips {
      font-size: 12px;
      color: #C1C1C1;
    }
  }
  ::v-deep.van-field__control--custom {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
